// Created by lifei on 2020/6/30--11:18.
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :data="tableData"
        :page.sync="page"
        :option="tableOption"
        :table-loading="tableLoading"
        @on-load="getList"
        @refresh-change="searchChange"
        @size-change="sizeChange"
        @search-change="searchChange"
        @current-change="changePage"
        @search-reset="clearForm"
        @selection-change="selectionChange"
      >
        <template slot="content" slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div style="max-width:1000px;" slot="content">{{scope.row.content}}</div>
            <div class="out-proportion">{{scope.row.content}}</div>
            <!-- <span>{{scope.row.content | ellipsis}}</span> -->
          </el-tooltip>
        </template>
        <template slot="search" slot-scope="{row,size}">
          <div style="width: 32.5%;">
            <el-form-item label="发送时间" label-width="90px">
              <el-date-picker
                v-model="sendTime"
                type="daterange"
                range-separator="至"
                format="yyyy-MM-dd"
                valueFormat="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="width: 32.5%;">
            <el-form-item label="消息类别" label-width="90px">
              <el-select v-model="messageType" dicData="message_types">
                <el-option
                  v-for="item in message_types"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                  <!-- {{item.name}} -->
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </template>
        <template slot="isRead" slot-scope="{row}">
          <el-tag v-if="row.isRead==='1'" type="success" size="small">已读</el-tag>
          <el-tag v-else type="warning" size="small">未读</el-tag>
        </template>
        <template slot="menuLeft">
          <el-button size="small" type="primary" icon="el-icon-tickets" @click="readContent()">批量已阅</el-button>
        </template>
        <template slot="menu" slot-scope="{row}">
          <el-button v-if="row.url" type="text" icon="el-icon-tickets" @click="openUrl(row)">打开</el-button>
          <el-button v-else type="text" icon="el-icon-tickets" @click="read(row)">已阅</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
	import {
	fetchList,
	readMsg,
	readMsgBatch,
	getMessageTypes
	} from "~/admin/api/message";
	import { tableOption } from "~/admin/const/message";
	export default {
	name: "index",
	components: { showDetailInfo },
	data() {
		return {
			info: {},
			uuid: "",
			qrcodeDialog: false,
			isShow: false,
			tableLoading: false,
			sendTime: [],
			messageType: "",
			uuidList: [],
			selectionList: [],
			message_types: [],
			searchForm: {
				msgCode: ""
			},
			page: {
				total: 1, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10 // 每页显示多少条
			},
			href: "",
			tableOption: tableOption,
			tableData: [],
			pushChannel: []
		};
	},
	created() {
		getMessageTypes().then(resp => {
			this.message_types = resp.data.data;
		});
	},
	filters: {
		ellipsis(value) {
		if (!value) return "";
		if (value.length > 30) {
			return value.slice(0, 30) + "...";
		}
		return value;
		}
	},
	methods: {
		getList(page, params = {}) {
			this.tableLoading = true;
			this.searchForm.msgCode = this.messageType;
			fetchList(
				Object.assign(
				{
					current: page.currentPage,
					size: page.pageSize
				},
				params,
				this.searchForm,
				{
					start: this.sendTime ? this.sendTime[0] : null,
					end: this.sendTime ? this.sendTime[1] : null
				}
				)
			).then(response => {
				this.tableData = response.data.data.records;
				this.page.total = response.data.data.total;
				this.tableLoading = false;
			}).catch(() => {
				this.tableLoading = false;
			});
		},
		clearForm() {
			this.searchForm = {};
			this.messageType = "";
			this.sendTime = [];
		},
		changePage(page) {
			console.log(page);
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		resetList() {},
		searchChange(form, done) {
			this.searchForm = form;
			this.getList(this.page, form);
			if (done) {
				done();
			}
		},
		selectionChange(list) {
			let selectUuid = [];
			list.forEach(async item => {
				selectUuid.push(item.uuid);
			});
			this.selectionList = list;
			this.uuidList = selectUuid;
		},
		readContent() {
			if (this.uuidList.length > 0) {
				let param = { uuidList: this.uuidList };
				readMsgBatch(param).then(resp => {
				this.selectionList.forEach(async item => {
					item.isRead = "1";
					this.$store.commit("getUnreadMsg");
				});
				});
			} else {
				this.$message.error("请选择一条消息");
			}
		},
		openUrl(item){
			this.read(item);
			console.log(item)



			// 打开url的方式由openType（打开类型：1-当前页面不覆盖菜单栏  2-弹窗 3-新标签页  4-当前页面覆盖导航
			if(item.url){
				switch(item.openType){
					case '1':
							this.$router.push(item.url);
						break;
					case '2':
							this.$router.push(item.url);
						break;
					case '3':
							window.open(item.url, '_blank')
						break;
					case '4':
							this.$router.push(item.url);
						break;
				}
			}

		},
		read(item) {
			readMsg(item.uuid).then(resp => {
				item.isRead = "1";
				this.$store.commit("getUnreadMsg");
			});
			// this.$refs.showDetailInfo.show(item);
			// this.getList(this.page)
		}
	}
	};
</script>

<style scoped lang='scss'>

.out-proportion {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.channels {
  .name {
    color: $theme-color;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  .line {
    margin: 0 4px;
  }
}
</style>
